<template>
	<view>
		<view class="nft_card_bg">
			<image src="../../static/img/nft_bg.jpg" mode=""></image>
		</view>
		<view class="nft_card">
			<!-- 顶层滚动 -->
			<view class="top_notice">
				<u-notice-bar :text="notice" bgColor="#fff" color="#fa3534"></u-notice-bar>
			</view>
			<!-- 顶部导航 -->
			<view class="header_nav">
				<view class="icon_box">
					<!-- 图标 -->
					<view class="icon">
						<image src="../../static/img/nft/pintu-.png" mode=""></image>
					</view>
					<!-- 文字 -->
					<view class="icon_text">
						NFT介绍
					</view>
				</view>
				<view class="icon_box">
					<!-- 图标 -->
					<view class="icon">
						<image src="../../static/img/nft/yanhua-.png" mode=""></image>
					</view>
					<!-- 文字 -->
					<view class="icon_text">
						项目方简介
					</view>
				</view>
				<view class="icon_box">
					<!-- 图标 -->
					<view class="icon">
						<image src="../../static/img/nft/liwu.png" mode=""></image>
					</view>
					<!-- 文字 -->
					<view class="icon_text">
						NFT盲盒
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<u-tabs :list="tablist" @change="changeTab"></u-tabs>
			<!-- nft展示 -->
			<view class="nft_shop" v-if="index === 0">
				<nft-card nftName="修勾币"></nft-card>
				<nft-card nftName="不知名币"></nft-card>
				<nft-card nftName="修勾币"></nft-card>
			</view>
			<view class="nft_shop" v-else-if="index === 1">
				2222
			</view>
			<view class="nft_shop" v-else>
				3333
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				notice: '我只想要快乐，谢谢你，cheems!',
				tablist: [{
					name: 'NFT碎片',
				}, {
					name: 'NFT成品',
				}],
				index: 0

			}
		},
		methods:{
			changeTab(item){
				// console.log(item.index)
				this.index = item.index
			}
		}
	}
</script>

<style lang="scss">
	.nft_card_bg {
		height: 400rpx;

		image {
			width: 101%;
			height: 100%;
		}
	}

	.nft_card {
		position: relative;
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		background-color: white;

		.top_notice {
			width: 80%;
			margin: 0 auto;
			margin-top: 30rpx;
		}

		.header_nav {
			padding: 20rpx 0 40rpx 0;
			margin: 0 70rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2px dashed #F5F5F5;


			.icon_box {
				height: 120rpx;
				text-align: center;
				font-size: $bsin-basin-font;

				.icon {
					width: auto;
					height: 90rpx;
					border-radius: 50%;
					// background-color: skyblue;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.nft_shop {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx 60rpx;
		}
	}
</style>
